<template>
  <div class="wrapper">
    <div class="common-tab-box">
      <div
        :class="{ active: tabI === index }"
        v-for="(item, index) in tab"
        :key="index"
        @click="changeTab(index)"
      >
        {{ item.label }}
      </div>
    </div>
    <div v-if="tabI === 0">
      <div class="middle-boxes">
        <div class="middle-box">
          <div class="name">机场旅客吞吐量</div>
          <div class="value-wrapper">
            <span class="value">{{ dataObj.jclkttl }}</span>
            <span class="extra">万人</span>
          </div>
        </div>
        <div class="middle-box">
          <div class="name">全省排名</div>
          <div class="value-wrapper">
            <!-- <span class="extra">第</span> -->
            <span class="value">{{ dataObj.qssw }}</span>
          </div>
        </div>
        <div class="middle-box">
          <div class="name">同比增长率</div>
          <div class="rate rate--up">{{ dataObj.tb }}%</div>
        </div>
      </div>
      <div>
        <ProgressBar :progress="+dataObj.jyqqhf" class="progress" />
        <div class="legend">较疫情前(2019)恢复{{ dataObj.jyqqhf }}%</div>
      </div>
    </div>
    <div v-else>
      <AirportThroughputChart />
    </div>
  </div>
</template>

<script>
import { postAction } from '@/api/manage'
import ProgressBar from '../common/ProgressBar.vue'
import AirportThroughputChart from './AirportThroughputChart.vue'

export default {
  name: 'AirportThroughput',
  components: {
    ProgressBar,
    AirportThroughputChart
  },
  data() {
    return {
      tab: [{ label: '旅客吞吐量' }, { label: '吞吐量趋势' }],
      tabI: 0,
      dataObj: {}
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    changeTab(tabI) {
      if (tabI === this.tabI) return false
      this.tabI = tabI
      // this.$emit('change-title', this.tab[tabI].label)
    },
    async loadData() {
      const res = await postAction(
        'topic/data/listAllData/dy_ydd_jtys_dfjtys_jclkttl',
        {}
      )
      if (res.success) {
        this.dataObj = res.result.data[0]
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.wrapper {
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 10px;

  .common-tab-box {
    margin-bottom: 0;
  }

  .middle-boxes {
    margin-top: 13px;
    height: 155px;
    display: grid;
    grid-template-columns: repeat(3, 114px);
    gap: 21px;

    .middle-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      background-repeat: no-repeat;
      background-position: center bottom;

      .name {
        font-family: MicrosoftYaHeiUI;
        font-size: 16px;
        color: #ffffff;
      }
      .value-wrapper {
        display: flex;
        align-items: center;

        .value {
          margin: 0 3px;
          font-family: YouSheBiaoTiHei;
          font-size: 24px;
          color: hsla(52, 100%, 50%, 1);
          line-height: 2;
        }
        .extra {
          font-family: MicrosoftYaHeiUI;
          font-size: 14px;
          color: #ffffff;
        }
      }
      .rate {
        display: flex;
        align-items: center;
        font-family: YouSheBiaoTiHei;
        font-size: 24px;
        color: #ff3e3e;
        line-height: 2;

        &::before {
          margin-right: 4px;
          display: block;
          width: 10px;
          height: 14px;
          background: url('../../images/left/up-arrow.png') no-repeat;
          background-size: 100% 100%;
          content: '';
        }
      }
      &:nth-of-type(1) {
        background-image: url('../../images/right/r-c-icon1.png');
      }
      &:nth-of-type(2) {
        background-image: url('../../images/right/r-c-icon2.png');
      }
      &:nth-of-type(3) {
        background-image: url('../../images/right/r-c-icon3.png');
      }
    }
  }

  .progress {
    margin-bottom: 8px;
  }

  .legend {
    font-family: MicrosoftYaHeiUI;
    font-size: 14px;
    color: #ffffff;

    &::before {
      content: '';
      display: inline-block;
      width: 12px;
      height: 12px;
      margin-right: 4px;
      border-radius: 2px;
      background-color: hsla(209, 79%, 65%, 1);
    }
  }
}
</style>
